<!-- 
	* 摘要：用户管理
	* 软件名称：雪克码数据管理系统1.0
	* 文件名: userList.vue
	* 版本：1.0
 -->
<template>
	<div class="sn-common-container ">
		<div class="prcoss-container">
			<header>
				<div class="sn-flex sn-row-center hidden-sm-and-down">
					<el-select v-model="searchLangage"  placeholder="选择语言"  clearable filterable style="width: 160px;margin-right: 10px;"  @change="currentChange(1)">
						<el-option v-for="item in langageList"
							:key="item.code"
							:label="item.name"
							:value="item.code">
						</el-option>
					</el-select>
					<el-input v-model="searchValue" placeholder="输入名称筛选" style="width: 200px" clearable
						@keyup.enter.native="currentChange(1)" />
					<el-button class="sn-btn" style="margin-left: 10px" type="primary" icon="el-icon-search"
						@click="currentChange(1)">
						搜索
					</el-button>
					<el-button class="sn-btn" style="margin-left: 10px" type="primary" icon="el-icon-plus"
						@click="addUserDialog = true">
						新建分类
					</el-button>
				</div>
				<div class="hidden-sm-and-up">
					<el-input v-model="searchValue" placeholder="输入名称筛选" style="width: 200px" clearable
						@keyup.enter.native="currentChange(1)" />
					<el-button style="margin-left: 4px" type="primary" class="sn-btn" icon="el-icon-search"
						@click="currentChange(1)">
					</el-button>
					<el-button style="margin-left: 4px" type="primary" class="sn-btn" 
						@click="addUserDialog = true">
						新增
					</el-button>
				</div>
			</header>
			<section>
				<global-table :loading="tableLoading" style="margin-top: 20px;" :pageIndex="currentPage"
					:pageSize="pageSize" :headerData="initData" :data="tabelData" :isFullScreen="false" :operateW="250">
					<template #createdTime="scope">
						{{ $parseTime(scope.row.created_at, '{y}-{m}-{d} {h}:{i}:{s}') }}
					</template>
					<template #operate="scope">
						<el-button type="warning"  icon="el-icon-edit" size="mini"
									@click="openLanguage(scope.row)">修改</el-button>
						<el-button type="primary" class="sn-btn"   icon="el-icon-delete" size="mini"
									@click="delStaffFn(scope.row.id,false)">删除</el-button>
					</template>
				</global-table>
			</section>
			<footer style="margin-top: 20px;">
				<el-pagination @current-change="currentChange" :current-page.sync="currentPage" :page-size="pageSize"
					layout="prev, pager, next, jumper" :pager-count="7" class="sn-pagination" hide-on-single-page
					style="text-align: center;" :total="totalNum" background>
					>
				</el-pagination>
			</footer>
		</div>
		<!-- 新增用户弹窗 -->
		<el-dialog :visible.sync="addUserDialog" class="sn-default-dialog" width="460px" @close="addUserDialogClose()">
			<div class="sn-title" slot="title">编辑分类</div>
			<div v-loading="languageLoading">
				<p>code:</p>
				<el-input v-model="code" placeholder="请输入分类code" style="width: 100%;margin-bottom: 20px;" ></el-input>
				<el-checkbox-group v-model="conditionGroup" class="condition-group" @change="changeCondition" >
					<el-checkbox-button v-for="item in langageList"  :label="item.id" :key="item.id">{{item.name}}</el-checkbox-button>
				</el-checkbox-group>
				<div v-for="(item,index) in langageList" :key="index"> 
					<AddBrands v-if="conditionGroup.includes(item.id)" :title="item.name" :type="item.value" @checkCondition="checkConditionFn" 
					:initData="conditionInitDataFn(item.id)"></AddBrands>
				</div>  
				<p style="text-align: center;">
					<el-button type="primary" size="medium" class="sn-btn" @click="addUserFn()">保存</el-button>
					<el-button size="medium" @click="addUserDialog = false">取消</el-button>
				</p>
			</div>
		</el-dialog>
	</div>
</template>
  
<script>
import GlobalTable from '@/components/GlobalTable';
import AddBrands from './AddBrands.vue';
import { guid } from '@/utils'
export default {
	components: { GlobalTable,AddBrands},
	data() {
		return {
			BrandId:'',
			tableLoading: false,
			tabelData: [],
			initData: [
				{
					label: '名称',
					value: 'name',
					id: guid(),
				},
				{
					label: 'code',
					value: 'code',
					id: guid(), 
					width:100
				},
				{
					label: '创建时间',
					value: 'createdTime',
					id: guid(),
					isCustom: true,
					width: 200
				},
			],
			currentPage: 1,
			pageSize: 10,
			totalNum: 0,
			searchValue: '',
			addUserDialog: false,
			languageName: '',
			languageCode: '',
			languageLoading: false,
			brandResourceId:'',
			searchLangage:'zh-CN',
			langageList: [],
			conditionGroup:[],
			languages: [],
			code:'',
		}
	},
	created() {
		this.getLanguageListFn();
		this.getDataListFn();
	},
	methods: {
		changeCondition(checkList){ 
			// this.languages.forEach(item=>{
			//     if(!checkList.includes(item.language_id)){
			// 		// let index = this.languages.findIndex(item1=>item1.language_id == item.id);
			// 		// if(index !== -1){
			// 		// 	this.languages.splice(index,1);
			// 		// }
			// 	}
			// });
		},
		conditionInitDataFn(type){
			let index = this.languages.findIndex(item => item.language_id == type);
			if(index !== -1){
				return this.languages[index];
			}else{
				return {
					name:'',
					img_url:'',
					language_id:type
				}
			}
		},
		checkConditionFn(data){
			let index = this.languages.findIndex(item => item.language_id == data.language_id);
			if(index === -1){
				this.languages.push(data);
			}else{
				this.languages.splice(index,1,data);
			}
		},
		async getLanguageListFn() {
			this.tableLoading = true;
			let params = {
				pageIndex: 1,
				pageSize: 999,
			}
			let requestConfig = {
				url:'languages',
				method:'get',
				params
			}
			const res = await this.$request(requestConfig);
			this.tableLoading = false;
			if (res.code === 'SUCCESS') {
				this.langageList = res.data.data;
			} else {
				this.langageList = [];
				this.$message.error('获取语言列表失败，错误信息：' + res.erroMessage);
			}
		},
		businessLicenseUploadFn(val)  {
			this.brandResourceId = val.local;
		},
		// 营业执照扫描件删除成功
		businessLicenseRemoveFn() {
			this.brandResourceId = '';
		},
		delStaffFn(id,isDelted) {
			this.$confirm('您将要把该分类删除, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(async () => {
				this.loading = true;
				try {
					let requestConfig = {
						url:'categories/'+id,
						method:'delete',
					}
					const res = await this.$request(requestConfig);
					this.loading = false;
					if (res.code === 'SUCCESS') {
						this.$message({
							type: 'success',
							message: '删除成功!'
						});
						this.getDataListFn();
					} else {
						this.$message.error('删除失败，错误信息：' + res.message);
					}
				} catch (error) {
					this.loading = false;
					this.erroMessageShow(error);
				}
			}).catch(() => {
				this.$message({
					type: 'info',
					message: '已取消删除'
				});
			});
		},
		async openLanguage(data){
			console.log(data);
			this.tableLoading = true;
			this.BrandId = data.id;
			let requestConfig = {
				url:'categories/'+data.id,
				method:'get',
			}
			const res = await this.$request(requestConfig);
			this.tableLoading = false;
			if (res.code === 'SUCCESS') {
				this.languages = res.data.languages;
				this.code = res.data.code;
				this.conditionGroup = res.data.languages.map(item=>item.language_id);
				this.addUserDialog = true;
			} else {
				this.$message.error('获取分类详情失败，错误信息：' + res.message);
			}
		},
		//新建用户
		async addUserFn() {
			this.languageLoading = true; 
			if(this.languages.length === 0){
				this.languageLoading = false;
				this.$message.error('分类内容不得为空！');
				return false;
			}
			let params = {
				code:this.code,
				languages:this.languages
			}
			if(this.BrandId !== ''){
				params.id = this.BrandId;
			}
			let requestConfig = {
				url:'categories',
				method:'put',
				data:params
			}
			const res = await this.$request(requestConfig);
			this.languageLoading = false;
			if (res.code === 'SUCCESS') {
				this.$message.success('编辑分类成功');
				this.addUserDialog = false;
				this.getDataListFn();
			} else {
				this.$message.error('编辑分类失败，错误信息：' + res.message)
			}
		},
		// 关闭新增用户信息窗口
		addUserDialogClose() {
			this.languages = [];
			this.BrandId = '';
			this.languageLoading = false;
		},
		//   分页器变化
		currentChange(val) {
			this.currentPage = val;
			this.getDataListFn();
		},
		//获取用户列表
		async getDataListFn() {
			this.tableLoading = true;
			let params = {
				page: this.currentPage,
				size: this.pageSize,
				name: this.searchValue,
			}
			let requestConfig = {
				url:this.searchLangage+'/categories',
				method:'get',
				params
			}
			const res = await this.$request(requestConfig);
			this.tableLoading = false;
			if (res.code === 'SUCCESS') {
				this.tabelData = res.data.data;
				this.totalNum = res.data.total;
			} else {
				this.tabelData = [];
				this.$message.error('获取分类列表失败，错误信息：' + res.message);
			}
		},
	}
};
</script>
  
<style lang="scss" scoped>
.prcoss-container {
	box-sizing: border-box;
	padding: 20px;
	background-color: #fff;
}
</style>